<template>
  <div id="set_password">
    <!-- 内容区域 -->
    <div class="wrapper">
      <!-- 返回按钮 -->
      <div class="back_part">
        <div class="back_btn" @click="goBack">
          <img src="@/assets/images/pc_black/auth/back.png" />
          <span>返回</span>
        </div>
      </div>

      <div class="content_title">设置密码</div>

      <div class="content_form">
        <el-form :label-position="labelPosition" :model="formData" @submit.native.prevent>
          <el-form-item label="输入手机号">
            <el-input
              v-model.trim="formData.phone"
              placeholder="请输入手机号"
              maxlength="11"
            ></el-input>
          </el-form-item>

          <el-form-item label="输入验证码" class="code_item">
            <el-input
              @input="codeInputing"
              v-model.trim="formData.code"
              placeholder="请输入验证码"
              maxlength="6"
            ></el-input>
            <button
              @click="getCode"
              :disabled="isCodeBtnDisabled"
              :class="{ opacityHalf: isCodeBtnDisabled }"
            >
              {{ codeBtnContent }}
            </button>
          </el-form-item>

          <el-form-item label="输入密码">
            <el-input
              @input="passwordInputing"
              show-password
              v-model.trim="formData.password"
              maxlength="6"
              placeholder="请输入六位数字密码"
            ></el-input>
          </el-form-item>

          <el-form-item label="确认密码">
            <el-input
              @input="rePasswordInputing"
              show-password
              v-model.trim="formData.rePassword"
              maxlength="6"
              placeholder="请再次确认您的密码"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div class="content_submit">
        <el-button class="btn_grey" v-if="cantSubmit" @click="confirm" :disabled="cantSubmit"
          >提交</el-button
        >
        <el-button class="btn_color" v-else @click="confirm" :disabled="cantSubmit">提交</el-button>
      </div>

      <!-- <div class="bottom_part">
        <div class="font_box">
          <span
            >Copyright © 2022 海南原上区块链科技有限公司 All Rights Reserved.
          </span>
          <span>琼ICP备18003326号-3</span>
        </div>
      </div> -->
    </div>

    <!-- mobile -->
    <div class="m_wrapper">
      <div class="m_form">
        <form v-on:submit.prevent>
          <div class="inputBox">
            <span class="inputLabel">手机号</span>
            <input
              v-model="formData.phone"
              type="tel"
              placeholder="请输入手机号"
              autocomplete="off"
              @input="phoneInputing"
              maxlength="11"
              disabled
            />
          </div>

          <div class="inputBox">
            <span class="inputLabel">验证码</span>
            <input
              v-model="formData.code"
              type="tel"
              placeholder="请输入验证码"
              autocomplete="off"
              @input="codeInputing"
              maxlength="6"
            />
            <van-button class="getCode" @click.stop="getCode" :disabled="isCodeBtnDisabled">{{
              codeBtnContent
            }}</van-button>
          </div>

          <div class="inputBox">
            <span class="inputLabel">支付密码</span>
            <input
              v-model="formData.password"
              type="password"
              placeholder="请输入六位数字密码"
              autocomplete="off"
              @input="passwordInputing"
              maxlength="6"
            />
          </div>

          <div class="inputBox">
            <span class="inputLabel">确认密码</span>
            <input
              v-model="formData.rePassword"
              type="password"
              placeholder="请再次确认您的密码"
              autocomplete="off"
              @input="rePasswordInputing"
              maxlength="6"
            />
          </div>
        </form>
      </div>

      <div class="btnBox">
        <van-button v-if="cantSubmit" class="submit btn_grey" :disabled="cantSubmit"
          >保存</van-button
        >
        <van-button v-else class="submit btn_color" :disabled="cantSubmit" @click="confirm"
          >保存</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
// vuelidate 用于表单验证
import { required, minLength, sameAs } from "vuelidate/lib/validators";
import { iscode, getWidth, reHeight } from "@/utils";
import { sendFindpwdVerifyCodeApi, setNewpwdApi } from "@/api";
import { getCookie } from "@/utils/cookie";
import { mapActions, mapState } from "vuex";

export default {
  name: "SetPassword",
  data() {
    return {
      // 表单标题靠齐
      labelPosition: "left",
      // 表单数据
      formData: {
        phone: "",
        code: "",
        password: "",
        rePassword: ""
      },
      // 验证码是否禁用
      isCodeBtnDisabled: false,
      // 登录按钮是否禁用
      cantSubmit: true,
      // 验证码倒计时
      codeBtnCount: 60,
      // 按钮是否通过点击启动
      byClick: false
    };
  },
  // vuelidate验证表单
  validations: {
    formData: {
      phone: {
        required,
        minLength: minLength(11)
      },
      code: {
        required,
        minLength: minLength(6)
      },
      password: {
        required,
        minLength: minLength(6)
      },
      rePassword: {
        sameAsPassword: sameAs("password")
      }
    }
  },
  computed: {
    // vuex
    ...mapState(["userInfo"]),
    // 验证码按钮显示
    codeBtnContent() {
      if (this.isCodeBtnDisabled && this.byClick) {
        return "剩余" + this.codeBtnCount + "S";
      } else {
        return "获取验证码";
      }
    }
  },
  mounted() {
    this.formData.phone = this.userInfo.phone;
    reHeight("set_password", this);
  },
  methods: {
    // ------ store ------
    // 获取用户信息
    ...mapActions(["getUserInfo"]),

    // ----- 异步相关方法 -----
    // 获取手机验证码
    async getCode() {
      let res = await sendFindpwdVerifyCodeApi({
        phone: this.formData.phone
      });
      if (iscode(res)) {
        getWidth() <= 768
          ? this.$toast({
              className: "getCode",
              message: "验证码已发送",
              duration: 2000
            })
          : this.$message({
              message: res.message,
              iconClass: "mySuccessIcon",
              customClass: "mySuccess"
            });

        if (res.code === 200005) {
          return;
        }

        // 验证码计时
        this.isCodeBtnDisabled = true;
        this.byClick = true;
        let codeTimer = setInterval(() => {
          this.codeBtnCount = this.codeBtnCount - 1;
          if (this.codeBtnCount === 0) {
            clearInterval(codeTimer);
            this.isCodeBtnDisabled = false;
            this.byClick = false;
            this.codeBtnCount = 60;
          }
        }, 1000);
      }
    },
    // 确认提交
    async confirm() {
      if (!this.$v.formData.$invalid) {
        // 手机号码登录
        let res = await setNewpwdApi({
          phone: this.formData.phone,
          verify_code: this.formData.code,
          password: this.formData.password,
          confirm_password: this.formData.rePassword,
          token: getCookie("token") || JSON.parse(window.localStorage.getItem("token"))
        });
        if (iscode(res)) {
          getWidth() <= 768
            ? this.$toast("保存成功")
            : this.$message({
                message: "保存成功",
                iconClass: "mySuccessIcon",
                customClass: "mySuccess"
              });
          this.getUserInfo();
          this.initFormData();
          this.$router.go(-1);
        }
      } else {
        this.isFirst_phone = false; // 修改成不是第一次进入了
        this.isFirst_code = false; // 修改成不是第一次进入
        this.isFirst_password = false; // 修改成不是第一次进入了
        this.isFirst_rePassword = false; // 修改成不是第一次进入
        this.$v.formData.phone.$touch();
        this.$v.formData.code.$touch();
        this.$v.formData.password.$touch();
        this.$v.formData.rePassword.$touch();
      }
    },

    // ------ 表单验证相关 ------
    // 初始化表单数据
    initFormData() {
      // 清空表单数据
      this.formData = {
        phone: "",
        code: "",
        password: "",
        rePassword: ""
      };

      this.isCodeBtnDisabled = true;
    },

    // 手机输入框输入时，正则限制只能输入数字
    phoneInputing() {
      this.isFirst_phone = true; // 在输入的时候让提示不现实，只有失去焦点时才显示验证结果
      this.$nextTick(() => {
        this.formData.phone = this.formData.phone.replace(/[^\d]/g, "");
      });

      if (this.codeBtnCount === 60) {
        if (!this.$v.formData.phone.$invalid) {
          this.isCodeBtnDisabled = false;
        } else {
          this.isCodeBtnDisabled = true;
        }
      }

      if (!this.$v.formData.$invalid) {
        this.cantSubmit = false;
      } else {
        this.cantSubmit = true;
      }
    },

    // 验证码输入框输入时，不现实验证结果
    codeInputing() {
      if (!this.$v.formData.$invalid) {
        this.cantSubmit = false;
      } else {
        this.cantSubmit = true;
      }
    },

    // 密码输入框输入时，不现实验证结果
    passwordInputing() {
      this.$nextTick(() => {
        this.formData.password = this.formData.password.replace(/[^\d]/g, "");
      });

      if (!this.$v.formData.$invalid) {
        this.cantSubmit = false;
      } else {
        this.cantSubmit = true;
      }
    },

    // 重复密码输入框输入时，不现实验证结果
    rePasswordInputing() {
      this.$nextTick(() => {
        this.formData.rePassword = this.formData.rePassword.replace(/[^\d]/g, "");
      });
      if (!this.$v.formData.$invalid) {
        this.cantSubmit = false;
      } else {
        this.cantSubmit = true;
      }
    },

    // ------ 路由跳转相关 ------
    // 返回按钮触发返回到上个界面
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
#set_password {
  // - 版心
  .wrapper {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden; // bfa
  }

  .m_wrapper {
    display: none;
  }

  // -退回按钮div
  // >> 返回按钮部分
  .back_part {
    width: 100%;
    padding-top: 20px;

    .back_btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 104px;
      height: 30px;
      border: none;
      background: none;
      background-image: url("../../assets/images/personalCenter/btn.png");
      background-position: center center;
      background-size: 100% 100%;
      cursor: pointer;

      img {
        width: 20px;
        height: 6px;
      }

      span {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 12px;
        margin-left: 10px;
      }
    }
  }

  // - 内容标题
  .content_title {
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    line-height: 18px;
    padding-top: 30px;
  }

  // - 表单区域
  .content_form {
    padding-top: 20px;

    /deep/label {
      width: 94px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 16px;
      text-align: right;
      word-break: keep-all;
    }

    /deep/.el-form {
      position: relative;
    }

    /deep/.el-form-item__content {
      padding-left: 10px;
    }

    /deep/.el-form-item {
      display: flex;
      align-items: center;
      margin: 0;
      margin-bottom: 15px;

      .el-input {
        width: 300px;
        height: 42px;

        input {
          height: 42px;
          background: #1e2020;
          border: 1px solid #444444;
          color: #ffffff;
          border-radius: 0;
        }
        input::-webkit-input-placeholder {
          /* WebKit browsers 适配谷歌 */
          color: #555555 !important;
        }
        input:-moz-placeholder {
          /* Mozilla Firefox 4 to 18 适配火狐 */
          color: #555555 !important;
        }
        input::-moz-placeholder {
          /* Mozilla Firefox 19+ 适配火狐 */
          color: #555555 !important;
        }
        input:-ms-input-placeholder {
          /* Internet Explorer 10+  适配ie*/
          color: #555555 !important;
        }
      }
    }

    /deep/.code_item {
      .el-form-item__content {
        display: flex;
      }

      .el-input {
        width: 187px;
        height: 42px;
      }

      button {
        background: none;
        border: none;
        width: 100px;
        height: 42px;
        background-image: url("../../assets/images/pc_black/center/code_btn.png");
        background-position: center center;
        background-size: 100% 100%;
        margin-left: 13px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #00ffb0;
        line-height: 14px;
        cursor: pointer;
      }

      .opacityHalf {
        opacity: 0.5;
      }
    }
  }

  // - 表单提交按钮
  .content_submit {
    display: flex;
    width: 100%;
    padding-top: 15px;
    padding-left: 104px;

    /deep/.el-button {
      width: 215px;
      height: 39px;
      border: none;
      background: none;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #1e2020;
      line-height: 14px;
      background-position: center center;
      background-size: 100% 100%;
      border-radius: 0 !important;
    }

    .btn_color {
      background-image: url("../../assets/images/pc_black/home/btn_color.png");
    }

    .btn_grey {
      background-image: url("../../assets/images/pc_black/home/btn_grey.png");
    }
  }

  // >> 底部部分
  .bottom_part {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 122px;
    background: #171818;
    box-shadow: 0px -1px 0px 0px #2e2f2f;

    .font_box {
      display: flex;
      flex-direction: column;

      span {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 14px;
        text-align: center;
      }

      span:nth-child(2) {
        margin-top: 15px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  #set_password {
    .wrapper,
    .back {
      display: none;
    }

    .m_wrapper {
      display: block;
      width: 100%;
      overflow: hidden;

      .m_form {
        width: 100%;
        padding-left: 30px;
        margin-top: 64px;

        .inputBox {
          display: flex;
          align-items: center;
          width: 100%;
          height: 100px;
          background: #1e2020;
          box-shadow: 0px 2px 0px 0px #333333;
          margin-bottom: 2px;

          .inputLabel {
            width: 130px;
            font-size: 30px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 30px;
            margin-right: 60px;
          }

          input {
            font-size: 30px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 30px;
            background: none;
            border: none;
          }
        }

        .getCode {
          position: absolute;
          right: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 160px;
          height: 44px;
          border-radius: 4px;
          border: 1px solid #00ffb0;
          backdrop-filter: blur(3px);
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #00ffb0;
          line-height: 24px;
          background: none;
        }
      }

      .btnBox {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 100px;
        padding: 0 30px;

        .submit {
          width: 100%;
          height: 72px;
          font-size: 32px;
          font-family: Microsoft YaHei;
          border-radius: 0;
          color: #2b2c2d;
          font-weight: 500;
          border: none;
          background: none;
          background-position: center center;
          background-size: 100% 100%;
        }
        .btn_color {
          background-image: url("../../assets/images/mobile_black/center/btn_color.png");
        }
        .btn_grey {
          background-image: url("../../assets/images/mobile_black/center/btn_grey.png");
        }
      }

      ::-webkit-input-placeholder {
        /* WebKit, Blink, Edge */
        color: #444444 !important;
      }
      :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #444444 !important;
      }
      ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #444444 !important;
      }
      :-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #444444 !important;
      }
    }
  }
}
</style>
